<template>
  <a-drawer
    width="100%"
    placement="right"
    :visible="visible"
    :closable="false"
    :bodyStyle="{ padding: '0' }"
    @close="cancel"
  >
    <a-config-provider>
      <div class="form-designer-container-9136076486841527">
        <div class="operating-area">
          <div class="left-btn-box">
            <a-tooltip title="重置">
              <a @click="tableReset">
                <a-icon type="retweet" />
                <span>重置</span>
              </a>
            </a-tooltip>
            <a-divider type="vertical" />
            <a-tooltip title="保存">
              <a @click="tableSave">
                <a-icon type="save" />
                <span>保存</span>
              </a>
            </a-tooltip>
            <a-divider type="vertical" />
            <a-tooltip title="发布">
              <a @click="tablePublic">
                <a-icon type="build" />
                <span>发布</span>
              </a>
            </a-tooltip>
          </div>
          <div class="right-btn-box">
            <div class="margin-right-xl">
              <a-tooltip :title="title"
                ><span class="text-bold">{{ title }}</span></a-tooltip
              >
              <a-divider type="vertical" />
              <a-tooltip title="关闭">
                <a @click="cancel" style="color: #ff4d4f">
                  <a-icon type="close" />
                  <span>关闭</span>
                </a>
              </a-tooltip>
            </div>
          </div>
        </div>
        <!-- 操作区域 end -->
        <div class="content toolbars-top">
          <a-spin :spinning="loading">
            <a-tabs
              :default-active-key="tabkey"
              v-model="tabkey"
              tab-position="left"
              @tabClick="tabClick"
              @change="changeTab"
            >
              <a-tab-pane key="1">
                <span slot="tab"><a-icon type="form" />配置 </span>

                <div class="tab-margin">
                  <column-index
                    ref="column"
                    :configId="configId"
                    :columns="list.columns"
                  />
                </div>
              </a-tab-pane>

              <a-tab-pane key="2">
                <span slot="tab"
                  ><a-badge :count="list.filter.length">
                    <a-icon type="filter" />过滤</a-badge
                  >
                </span>
                <div class="tab-margin">
                  <filter-index
                    ref="filter"
                    :columns="list.columns"
                    :filter="list.filter"
                  />
                </div>
              </a-tab-pane>
              <a-tab-pane key="3">
                <span slot="tab"
                  ><a-badge :count="list.search.columns.length">
                    <a-icon type="search" />查询</a-badge
                  >
                </span>
                <div class="tab-margin">
                  <search-index
                    ref="search"
                    :columns="list.columns"
                    :config="list.search"
                  />
                </div>
              </a-tab-pane>
              <a-tab-pane key="4">
                <span slot="tab"> <a-icon type="highlight" />样式 </span>
                <div class="tab-margin">
                  <style-index ref="style" :config="list.style" />
                </div>
              </a-tab-pane>
              <a-tab-pane key="6">
                <span slot="tab"> <a-icon type="mobile" />手机 </span>
                <phone-index ref="phone" :columns="list.columns" />
              </a-tab-pane>
            </a-tabs>
          </a-spin>
        </div>
      </div>
    </a-config-provider>
  </a-drawer>
</template>

<script>
import { findById, column, query } from "@/services/system/agile/list/desinger";
import "@/pages/system/agile/components/styles/form-design.less";
import columnIndex from "@/pages/system/agile/common/column/index";
import searchIndex from "@/pages/system/agile/common/search/index";
import filterIndex from "@/pages/system/agile/common/filter/index";
import styleIndex from "@/pages/system/agile/common/style/index";
import phoneIndex from "@/pages/system/agile/common/phone/index";
import Sortable from "sortablejs";

import { listSave, listPublic } from "@/services/system/agile/list/desinger";
export default {
  name: "businessdatadesinger",
  components: {
    columnIndex,
    searchIndex,
    filterIndex,
    styleIndex,
    phoneIndex,
  },
  data() {
    return {
      loading: false,
      tabkey: "1",
      bodyStyle: {
        padding: "0",
      },
      form: {
        configId: "", //配置Id
        menuId: "", //菜单Id
      },

      list: {
        columns: [], //表格控件
        search: {
          labelCol: 8,
          wrapperCol: 16,
          num: 3, //显示个数
          columns: [], //查询条件
        },
        filter: [], //筛选条件
        style: {
          rowHeight: 40,
          paging: true,
          columnIsCurrent: true,
          rowIsCurrent: true,
          stripe: true,
          select: "checkbox",
          border: "full",
        },
        phone: {
          style: 1, //卡片模版
          title: undefined, //标题
          subTitle: undefined, //摘要
          columns: [], //显示字段
          cover: undefined, //封面
          coverPosition: undefined, //显示位置
          coverShowType: undefined, //显示方式
        },
      },

      editRow: {}, //当前编辑行
      systemColumns: [
        "Id",
        "RelationId",
        "CreateUserId",
        "CreateOrganizationId",
        "CreateOrganizationName",
        "UpdateUserId",
        "UpdateOrganizationId",
        "UpdateOrganizationName",
      ],
    };
  },
  created() {
    this.find();
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    configId: String,
    title: {
      type: String,
    },
  },

  methods: {
    /**
     * 根据Id查找
     */
    find() {
      let that = this;
      that.loading = true;
      let param = {
        limit: 9999,
        sidx: "OrderNo",
        configType: 1,
      };

      let subtable = []; //所有子表

      //查询所有子表
      query(param).then(function (result) {
        subtable = result.data;
      });

      findById(that.configId).then(function (result) {
        let form = result.data;

        //所有列
        column({
          name: form.dataFromName,
        }).then((result) => {
          //所有字段
          let controls = [];
          result.data.forEach((item) => {
            controls.push({
              model: item.name,
              label: item.description,
            });
          });

          let addColumns = [];
          //如果已配置列表选项
          if (form.saveJson) {
            let configColumns = JSON.parse(form.saveJson);

            result.data.forEach((item) => {
              //是否已配置
              let haveColumns = configColumns.columns.filter(
                (f) => f.name == item.name
              );
              if (haveColumns.length == 0) {
                addColumns.unshift(item);
              } else {
                haveColumns[0].subtable.all = subtable;
                haveColumns[0].controls = controls;
                that.list.columns.push(haveColumns[0]);
              }
            });

            addColumns.forEach((item) => {
              if (item.name.indexOf("_RelationId") < 0) {
                let column = {};
                column.isShow =
                  that.systemColumns.filter((f) => f == item.name).length == 0;
                column.isSearch =
                  item.name == "RelationId"
                    ? true
                    : that.systemColumns.filter((f) => f == item.name).length ==
                      0;
                column.isSort =
                  that.systemColumns.filter((f) => f == item.name).length == 0;
                column.isSortDefalut = null;
                column.isSortAsc = null;
                column.isTotal = null;
                column.name = item.name;
                column.description = item.description;
                column.width = 150;
                column.align = "left";
                column.fixed = undefined;
                column.templet = [];
                column.subtable = {
                  all: subtable,
                  config: {
                    condition: null,
                  },
                  id: [],
                };
                column.dialog = {
                  config: {
                    condition: null,
                    height: 200,
                    heightUnit: ["px"],
                    width: 300,
                    widthUnit: ["px"],
                  },
                  id: [],
                };
                column.header = {
                  title: null,
                  field: [],
                };
                column.style = [];
                column.controls = controls;
                that.list.columns.unshift(column);
              }
            });
          } else {
            let columns = [];
            result.data.forEach((item) => {
              if (item.name.indexOf("_RelationId") < 0) {
                let column = {};
                column.isShow =
                  that.systemColumns.filter((f) => f == item.name).length == 0;
                column.isSearch =
                  item.name == "RelationId"
                    ? true
                    : that.systemColumns.filter((f) => f == item.name).length ==
                      0;
                column.isSort = true;
                column.isSortDefalut = null;
                column.isSortAsc = null;
                column.isTotal = null;
                column.name = item.name;
                column.description = item.description;
                column.width = 150;
                column.align = "left";
                column.fixed = undefined;
                column.templet = [];
                column.subtable = {
                  all: subtable,
                  config: {
                    condition: null,
                  },
                  id: [],
                };
                column.dialog = {
                  config: {
                    condition: null,
                    height: 200,
                    heightUnit: ["px"],
                    width: 300,
                    widthUnit: ["px"],
                  },
                  id: [],
                };
                column.header = {
                  title: null,
                  field: [],
                };
                column.style = [];
                column.controls = controls;
                columns.push(column);
              }
            });
            that.list.columns = columns;
          }

          if (form.saveJson) {
            var saveJson = JSON.parse(form.saveJson);
            that.list.style = saveJson.style;
            that.list.filter = saveJson.filter;
            that.list.search = saveJson.search;
            that.list.phone = saveJson.phone;
          }

          that.loading = false;
        });
      });
    },

    /**
     *选项卡改变事件
     */
    changeTab(activeKey) {
      if (activeKey == "3") {
      }
    },

    /**
     * 选项卡切换
     */
    tabClick() {
      if (this.tabkey == "4") {
      }
    },

    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     *
     */
    tableReset() {
      let that = this;

      that.loading = true;
      let param = {
        limit: 9999,
        sidx: "OrderNo",
        configType: 1,
      };
      let subtable = []; //所有子表

      //查询所有子表
      query(param).then(function (result) {
        subtable = result.data;
      });

      findById(that.configId).then(function (result) {
        let form = result.data;
        that.form.configId = that.configId;
        //所有列
        column({
          name: form.dataFromName,
        }).then((result) => {
          //所有字段
          let controls = [];
          result.data.forEach((item) => {
            controls.push({
              model: item.name,
              label: item.description,
            });
          });

          //that.list.search.columns = controls;

          let columns = [];
          result.data.forEach((item) => {
            if (item.name.indexOf("_RelationId") < 0) {
              let column = {};
              column.isShow = true;
              column.isSearch = true;
              column.isSort = true;
              column.isSortDefalut = null;
              column.isSortAsc = null;
              column.isTotal = null;
              column.name = item.name;
              column.description = item.description;
              column.width = 150;
              column.align = "left";
              column.fixed = null;
              column.templet = [];
              column.subtable = {
                all: subtable,
                config: {
                  condition: null,
                },
                id: [],
              };
              column.dialog = {
                config: {
                  condition: null,
                  height: 200,
                  heightUnit: ["px"],
                  width: 300,
                  widthUnit: ["px"],
                },
                id: [],
              };
              column.header = {
                title: null,
                field: [],
              };
              column.style = [];
              column.controls = controls;
              columns.push(column);
            }
          });
          that.list.columns = columns;

          that.loading = false;
        });

        that.rowDrop();
      });
    },
    /**
     * 拖拽
     */
    rowDrop() {
      let that = this;
      const xTable = this.$refs.column;
      this.sortable1 = Sortable.create(
        xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
        {
          handle: ".drag-btn",
          onEnd: ({ newIndex, oldIndex }) => {
            const currRow = that.list.columns.splice(oldIndex, 1)[0];
            that.list.columns.splice(newIndex, 0, currRow);
          },
        }
      );
    },
    /**
     * 表格配置保存
     */
    tableSave() {
      let that = this;
      let form = {
        configId: this.configId,
        saveJson: JSON.stringify(this.list),
      };
      that.$loading.show({ text: "保存中,请稍等..." });
      listSave(form).then(function (result) {
        that.$loading.hide();
        if (result.code === that.eipResultCode.success) {
          that.$message.success(result.msg);
        } else {
          that.$message.error(result.msg);
        }
      });
    },

    /**
     * 表格配置发布
     */
    tablePublic() {
      let that = this;
      const modal = this.$confirm({
        okText: "确认",
        cancelText: "取消",
        title: "表单发布提示",
        content: "若已发布会覆盖原来结构，且不可恢复？",
        onOk() {
          modal.destroy();
          let form = {
            configId: that.configId,
            saveJson: JSON.stringify(that.list),
            publicJson: JSON.stringify(that.list),
          };
          that.$loading.show({ text: "发布中,请稍等..." });
          listPublic(form).then(function (result) {
            that.$loading.hide();
            if (result.code === that.eipResultCode.success) {
              that.$message.success(result.msg);
              that.$emit("public");
            } else {
              that.$message.error(result.msg);
            }
          });
        },
        onCancel() {},
      });
    },

    /**
     * 表格预览
     */
    tablePreview() {},
  },
};
</script>

<style lang="less" scoped>
.close-box {
  bottom: 100px !important;
}

.drag-btn {
  cursor: move;
}

.form-designer-container-9136076486841527 .content section {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-width: calc(100% - 270px);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0 8px 0;
  -webkit-box-shadow: 0px 0px 1px 1px #ccc;
  box-shadow: 0px 0px 1px 1px #ccc;
}
.form-designer-container-9136076486841527 .content aside.right .ant-form-item {
  margin-bottom: 0;
  padding: 6px 0;
  border-bottom: 1px solid #ccc;
}
/deep/ .ant-tabs-bar {
  margin: 0 !important;
}

.tab-margin {
  margin: 5px;
}

/deep/ .ant-tabs-bar {
  margin: 0 0 4px 0 !important;
}

/deep/ .ant-tabs {
  height: calc(100vh - 57px) !important;
  box-shadow: 0px 0px 1px 1px #ccc;
}

/deep/ .ant-tabs .ant-tabs-left-content {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.ant-tabs-left-bar {
  border-right: 1px solid #ccc;
}
</style>
